<template>
  <div>
    <!-- 搜索框 -->
    <el-card class="box-card" shadow="never">
      <div class="text item">
        <i class="el-icon-search"></i>&nbsp;
        <span>筛选搜索</span>
        <br />
        <br />
        <el-form :inline="true" :model="orderSearch" class="demo-form-inline">
          <el-form-item label="订单编号:">
            <el-input v-model="orderSearch.id" placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="收货人:">
            <el-input v-model="orderSearch.receiverContact" placeholder="请输入收货人"></el-input>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="orderSearch.orderStatus" :clearable="true" placeholder="请选择">
              <el-option label="待发货" value="1"></el-option>
              <el-option label="已发货" value="2"></el-option>
              <el-option label="已完成" value="3"></el-option>
              <el-option label="已关闭" value="4"></el-option>
              <el-option label="待付款" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getOrderList()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card card-toubu" shadow="never">
      <div class="text item">
        <i class="el-icon-tickets"></i>&nbsp;
        <span>数据列表</span>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-table border :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="180"></el-table-column>
      <el-table-column prop="username" label="用户账户" width="140"></el-table-column>
      <el-table-column prop="totalMoney" label="订单金额" width="130">
        <template slot-scope="scope">
          <a>{{(scope.row.totalMoney/100).toFixed(2)}}</a>
        </template>
      </el-table-column>
      <el-table-column label="支付方式" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.payType == 3">银联支付</span>
          <span v-if="scope.row.payType == 2">支付宝</span>
          <span v-if="scope.row.payType == 1">微信支付</span>
          <span v-if="scope.row.payType == 0">货到付款</span>
        </template>
      </el-table-column>
      <el-table-column label="订单来源" width="140">
        <template slot-scope="scope">
          <span v-if="scope.row.sourceType == 1">web订单</span>
          <span v-if="scope.row.sourceType == 2">app订单</span>
          <span v-if="scope.row.sourceType == 3">微信公众号订单</span>
          <span v-if="scope.row.sourceType == 4">微信小程序订单</span>
          <span v-if="scope.row.sourceType == 5">H5手机页面订单</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.orderStatus == 1">待发货</span>
          <span v-if="scope.row.orderStatus == 2">已发货</span>
          <span v-if="scope.row.orderStatus == 3">已完成</span>
          <span v-if="scope.row.orderStatus == 4">已关闭</span>
          <span v-if="scope.row.orderStatus == 0">待付款</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="chakanxianqin(scope.row)">查看订单</el-button>
          <el-button
            size="mini"
            v-if="scope.row.orderStatus == 0"
            @click="closeOrder(scope.row)"
          >关闭订单</el-button>
          <el-button size="mini" v-if="scope.row.orderStatus == 1" @click="ddfahuo(scope.row)">订单发货</el-button>
          <el-button size="mini" v-if="scope.row.orderStatus == 2" @click="ddgenzon(scope.row)">订单跟踪</el-button>
          <el-button size="mini" v-if="scope.row.orderStatus == 3" @click="ddgenzon(scope.row)">订单跟踪</el-button>
          <el-button
            size="mini"
            type="danger"
            v-if="scope.row.orderStatus == 4"
            @click="deleteOrder(scope.row)"
          >删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row :gutter="24" style="margin-top: 10px;">
      <el-col :span="11">
        <el-button @click="bulkDelivery()">批量发货</el-button>
        <el-button @click="hebindd()">合并订单</el-button>
        <el-button @click="drawerFormVisible = true">拆分订单</el-button>
      </el-col>
      <el-col :span="13">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 对话框 -->
    <el-dialog title="合并订单" :visible.sync="dialogFormVisible" @close="dialogClose">
      <span style="font-size: 12px;margin-left: 100px;">当两个订单不一致时，合并后的订单信息（如：支付方式、配送方式、活动优惠等）以主订单为准。</span>
      <el-form :model="heBinInfo" style="margin-top: 20px;">
        <el-form-item label="主订单:" :label-width="formLabelWidth">
          <el-input v-model="heBinInfo.zhuDinDanId" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="从订单:" :label-width="formLabelWidth">
          <el-input v-model="heBinInfo.conDinDanId" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="hebin()">合 并</el-button>
      </div>
    </el-dialog>
    <!-- 抽屉 -->
    <el-drawer
      title="拆分订单"
      :visible.sync="drawerFormVisible"
      direction="rtl"
      size="50%"
      style="text-align: center;"
      @close="cancelForm()"
    >
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="需要拆分订单:">
          <el-input v-model="orderId" placeholder="输入订单号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="caifendd()">查 询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="gridData" border>
        <el-table-column property="name" label="商品名称" width="300"></el-table-column>
        <el-table-column label="价格/货号" width="150">
          <template slot-scope="scope">
            <span>价格:￥{{ (scope.row.money/100).toFixed(2) }}</span>
            <br />
            <span>货号:{{ scope.row.sn }}</span>
          </template>
        </el-table-column>
        <el-table-column property="spec" label="属性"></el-table-column>
        <el-table-column property="num" label="数量" width="50"></el-table-column>
        <el-table-column property="kucun" label="库存"></el-table-column>
        <el-table-column label="拆分数量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sl" type="text"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-drawer__footer" style>
        <el-button @click="cancelForm()">取 消</el-button>
        <el-button type="primary" @click="closeDrawer()">提 交</el-button>
      </div>
    </el-drawer>

    <el-dialog title="关闭订单" :visible.sync="gbdialogFormVisible">
      <el-input type="textarea" :rows="2" placeholder="请输入操作备注" v-model="guanbiInfo.beizhu"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="gbdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="qdCloseOrder()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      multipleSelection: "",
      orderSearch: {
        id: "",
        receiverContact: "",
        orderStatus: ""
      },
      page: 1,
      size: 10,
      total: 0,
      dialogFormVisible: false,
      drawerFormVisible: false,
      gbdialogFormVisible: false,
      formLabelWidth: "80px",
      heBinInfo: {
        zhuDinDanId: "",
        conDinDanId: ""
      },
      orderStatus: "",
      orderId: "",
      gridData: [],
      caifen: [],
      guanbiInfo: {
        beizhu: "",
        id: ""
      }
    };
  },
  created () {
    this.getOrderList();
  },
  methods: {
    async getOrderList () {
      const { data: res } = await this.$http.post(
        `vi/order/order/pageQueryByAll/${this.page}/${this.size}`,
        this.orderSearch
      );
      this.tableData = res.data.pageUtils.rows;
      this.total = res.data.pageUtils.total;
    },
    handleDelete (row) {
      console.log(row);
    },
    handleSizeChange (val) {
      this.size = val;
      this.getOrderList();
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getOrderList();
    },
    // 勾选多选框改变事件
    handleSelectionChange (val) {
      this.multipleSelection = "";
      if (val.length > 0) {
        this.orderStatus = val[0].orderStatus;
      }
      val.forEach(element => {
        this.multipleSelection = this.multipleSelection + element.id + ",";
      });
      this.multipleSelection = this.multipleSelection.substring(
        0,
        this.multipleSelection.length - 1
      );
    },
    // 批量发货
    bulkDelivery () {
      if (this.multipleSelection.length === 0) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择订单"
        });
        return;
      }
      this.$router.push({
        path: "/home/delivery",
        query: {
          ids: this.multipleSelection
        }
      });
    },
    dialogClose () {
      // 重置causeInfo数据
      Object.assign(this.$data.heBinInfo, this.$options.data().heBinInfo);
    },
    async hebin () {
      if (this.heBinInfo.conDinDanId === "") {
        // 提示信息
        this.$message({
          type: "info",
          message: "请填写从订单"
        });
        return;
      }

      const { data: res } = await this.$http.post(
        `vi/order/order/heBin`,
        this.heBinInfo
      );
      // 提示信息
      this.$message({
        type: "success",
        message: res.message
      });
      this.dialogFormVisible = false;
      this.getOrderList();
    },
    // 合并订单
    hebindd () {
      if (this.multipleSelection.length === 0) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择订单"
        });
        return;
      }
      if (this.multipleSelection.split(",").length > 1) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择一个主订单"
        });
        return;
      }
      if (
        this.orderStatus === "2" ||
        this.orderStatus === "3" ||
        this.orderStatus === "4"
      ) {
        // 提示信息
        this.$message({
          type: "info",
          message: "请选择待发货或待付款订单"
        });
        return;
      }
      this.heBinInfo.zhuDinDanId = this.multipleSelection;
      this.dialogFormVisible = true;
    },
    // 拆分订单
    async caifendd () {
      const { data: res } = await this.$http.get(
        `vi/order/order/item/queryByOrderIdGoods/${this.orderId}`
      );
      this.gridData = res.data.TbOrderItems;
    },
    cancelForm () {
      this.gridData = [];
      this.orderId = "";
    },
    // 提交拆分
    async closeDrawer () {
      this.caifen = [];

      this.gridData.forEach(el => {
        var o = {};
        o.id = el.id;
        o.sum = el.sl;
        this.caifen.push(o);
      });
      const { data: res } = await this.$http.post(
        `vi/order/order/item/caiFen`,
        this.caifen
      );
      if (res.code === 20001) {
        // 提示信息
        this.$message({
          type: "info",
          message: res.message
        });
      } else {
        // 提示信息
        this.$message({
          type: "success",
          message: res.message
        });
        this.drawerFormVisible = false;
        this.getOrderList();
      }
    },
    // 关闭订单
    closeOrder (row) {
      this.gbdialogFormVisible = true;
      this.guanbiInfo.id = row.id;
    },
    // 删除订单
    deleteOrder (row) {
      this.$confirm("此操作将任务状态改为删除状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          // 点击确定的操作(调用接口)
          const { data: res } = await this.$http.delete(
            `vi/order/order/delete/${row.id}`
          );
          // 提示信息
          this.$message({
            type: "success",
            message: res.message
          });
          this.getOrderList();
        })
        .catch(() => {
          this.$message("取消删除");
        });
    },
    // 确定关闭订单
    async qdCloseOrder () {
      if (this.guanbiInfo.beizhu === "") {
        // 提示信息
        this.$message({
          type: "info",
          message: "操作备注不能为空"
        });
        return;
      }
      const { data: res } = await this.$http.post(
        `vi/order/order/closeOrder`,
        this.guanbiInfo
      );
      // 提示信息
      this.$message({
        type: "success",
        message: res.message
      });
      this.getOrderList();
      this.gbdialogFormVisible = false;
    },
    // 查看详情
    chakanxianqin (row) {
      this.$router.push({
        query: {
          id: row.id
        },
        path: "/home/order/orderDetails"
      });
    },
    // 订单发货
    ddfahuo (row) {
      this.$router.push({
        path: "/home/delivery",
        query: {
          ids: row.id
        }
      });
    },
    // 订单跟踪
    ddgenzon (row) {
      // 提示信息
      this.$message({
        type: "success",
        message: "功能还未完善"
      });
    }
  }
};
</script>
<style></style>
